<template>
  <div class="bg publicZIndexBackground" :style="{ backgroundImage: 'url(' + bg + ')' }"></div>
</template>
<script>
import { mapState } from 'vuex';
import { commitBackgroundFileList } from '@/utils/preloadFile';

const BARBG = require('../../../assets/image/hdBar/bg.png');

export default {
  name: 'background',
  computed: {
    ...mapState({
      background: (state) => state.live.background,
      emceeId: (state) => state.live.emceeId,
    }),
    bg() {
      let tmpBg;
      if (this.$store.state.live.background && this.$store.state.live.background !== '0') {
        tmpBg = this.background;
      } else {
        tmpBg = BARBG;
      }
      commitBackgroundFileList({
        path: tmpBg,
        type: 'img',
      });
      return tmpBg;
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
}
</style>
